<template>
	<div>
    <!-- 新增/编辑人员 -->
    <div class="project_detail" v-show="showDetail">
      <div>
        <div class="title">工程类型</div>
        <div class="content">{{ detail.typeName || '-' }}</div>
      </div>
      <div>
        <div class="title">工程名称</div>
        <div class="content">{{ detail.name || '-' }}</div>
      </div>
      <div>
        <div class="title">工程编号</div>
        <div class="content">{{ detail.code || '-' }}</div>
      </div>
      <div>
        <div class="title">建设单位</div>
        <div class="content">{{ detail.ownerUnit || '-' }}</div>
      </div>
      <div>
        <div class="title">施工单位</div>
        <div class="content">{{ detail.workUnit || '-' }}</div>
      </div>
      <div>
        <div class="title">项目部</div>
        <div class="content">{{ detail.department || '-' }}</div>
      </div>
      <div class="footer">
        <el-button size="small" @click="close">我知道了</el-button>
        <el-button size="small" v-show="!detail.surveyId" type="primary" @click="showDetail=false">修改</el-button>
      </div>
    </div>
    <div v-show="!showDetail">
      <el-form ref="dataForm" :rules="rules" :model="temp"  size="small" label-position="top">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="工程类型 " prop="type">
              <el-select style="width: 100%;" v-model="temp.type" @change="changeType" placeholder="请选择">
                <dict-option v-if="!showDetail" :dictName="'projectType'"></dict-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="工程名称" prop="name">
              <el-input 
                v-model="temp.name" 
                placeholder="请输入工程名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item :label="temp.type === 2 ? '工程编号(自动生成)' :'工程编号' " prop="code">
              <el-input
                :disabled="temp.type!=1"
                v-model="temp.code"
                placeholder="请输入工程编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="建设单位 " prop="ownerUnit">
              <el-input
                v-model="temp.ownerUnit"
                placeholder="请输入建设单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="施工单位 " prop="workUnit">
              <el-input
                v-model="temp.workUnit"
                placeholder="请输入施工单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="项目部 " prop="department">
              <el-input
                v-model="temp.department"
                placeholder="请输入项目部"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer">
        <el-button size="small" @click="close">
          取消
        </el-button>
        <el-button size="small" type="primary" @click="saveDetail()">
          确认
        </el-button>
      </div>
    </div>
	</div>
</template>

<script>
  import DictOption from '@/components/selectOption/dict'
  import { saveProjcet, getCode } from '@/api/project/index'
	export default {
		name: 'projectDialog',
    props: {
      detail: {
        type: Object
      }
    },
    components: {
      DictOption
    },
		data() {
			return {
        elLoading: false,
        showDetail: true,
        temp: {
          id: null,
          name: '',
          code: '',
          ownerUnit: '',
          workUnit: '',
          department: '',
          type: null
        },
        textMap: {
					create: '添加人员',
					update: '编辑人员'
				},
        rules: {
          name: [
						{ required: true, message: '工程名称不能为空', trigger: 'blur'},
					],
          code: [
						{ required: true, message: '工程编号不能为空', trigger: 'blur'},
					],
          ownerUnit: [
						{ required: true, message: '建设单位不能为空', trigger: 'blur'},
					],
          workUnit: [
						{ required: true, message: '施工单位不能为空', trigger: 'blur'},
					],
          department: [
						{ required: true, message: '项目部不能为空', trigger: 'blur'},
					],
          type: [
						{ required: true, message: '请选择工程类型', trigger: 'blur'},
					],
        },
        loading: null
			};
		},
		mounted() {
      this.showDetail = this.detail.id ? true : false
      if(this.detail.id) {
        this.temp = {...this.detail}
      }
		},
		methods: {
			close() {
        this.$emit('close')
      },
      saveDetail() {
        this.$refs['dataForm'].validate((valid) => {
					if (valid) {
            saveProjcet(this.temp).then(res=> {
              this.$emit('close', true)
            })
					}
				})
      },
      changeType(e) {
        if(e === 2) {
          this.getProjectCode()
        }
      },
      getProjectCode() {
        getCode().then(res => {
          console.log(res)
          this.temp.code = res.data
        })
      },
      openLoading(){
        this.elLoading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      closeLoading(){
        this.elLoading.close();
      },
		},
	}
</script>

<style lang="scss" scoped>
.project_detail {
  >div {
    margin-bottom: 30px;
  }
  .title {
    margin: 10px 0;
    color: #131414;
    font-size: 14px;
  }
  .content {
    margin: 10px 0;
    color: #131414;
    font-size: 13px;
  }
  ::v-deep .el-checkbox {
    width: 110px;
  }
}
.footer {
  margin-top: 10px;
  text-align: right;
}
</style>
